<template>
	<vxe-grid ref="grid" v-bind="gridOptions">
		<template #cycle="{row,rowIndex}">{{ dayjs(row.beginDate).format(DATE_FORMAT.DATE)+' 至 '+ dayjs(row.endDate).format(DATE_FORMAT.DATE)}}</template>
		<template #period="{row,rowIndex}">{{ row.year+' 年 '+ row.month+' 月 '+row.day+' 日 '}}</template>
		<template #periodMonth="{row,periodMonth}">{{row.periodMonth==99?'一次性付清': '付'+row.periodMonth}}</template>
		<template #price="{row,periodMonth}">{{row.price>-1? Number(row.price).toFixed(2) : 0 }}</template>
	</vxe-grid>
</template>
<script setup lang="ts">
	import {useStore} from '@/store/index'
	import dayjs, {Dayjs} from 'dayjs'
	import DATE_FORMAT, {nowDate} from 'yuxin-base/src/utils/date'
	import {onMounted, reactive, ref,toRef} from 'vue'
	import {pagerConfig} from 'yuxin-base/src/utils/vxe-table'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {OwnerContract} from '@/interface/contract'

	const props = withDefaults(
		defineProps<{
			contractId: string,
			detailInfo: OwnerContract
		}>(),
		{
			contractId: ''
		}
	)

	// const params = reactive<any>({
	// 	contractId:toRef(props,'contractId')
	// })
	const grid = ref<any>('')
	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '分阶周期',
				minWidth: 220,
				// width: 100,
				align: 'left',
				slots: {
					default: 'cycle'
				}
			},
			{
				title: '分阶期限',
				minWidth: 150,
				// width: 100,
				align: 'left',
				slots: {
					default: 'period'
				}
			},
			{
				title: '付款方式',
				minWidth: 150,
				align: 'left',
				slots: {
					default: 'periodMonth'
				}
			},
			{
				title: '免租天数',
				minWidth: 100,
				align: 'left',
				field:'freeDays'
			},
			{
				title: '递增比例',
				minWidth: 100,
				align: 'left',
				field:'scale'
			},
			{
				title: '月租金(元)',
				minWidth: 120,
				align: 'right',
				field:'price',
				slots: {
					default: 'price'
				}
			}
		],
		data:props.detailInfo?.sublevelContracts|| []
	})
</script>
<style lang="less">

</style>
